<template>
	<view>
		<view>
			<view class="leaveNav">
				<view @click="attendanceTtileFun()" style="margin-left:-80rpx;font-weight: 800;">最新报修记录
					<view class="leaveLine" v-show="isShowTitle"></view>
				</view>
				<view @click="attendanceTtileFun()"  style="margin-left:60rpx;font-weight: 800;" >历史报修记录
					<view class="leaveLine" v-show="!isShowTitle"></view>
				</view>
			</view>
			<view  v-if="maintenanceList.length>0">
				<view v-for="(item,index) in maintenanceList" :key="index" @click="newMaintenanceFun(item)">
					<view class="mainContentWrap" >
						<view style="margin-top:30rpx;color:#0000FF;font-weight: 800;font-size: 36rpx;width:180rpx">
							<span class="iconfont icon-shouye-shouye" style="font-size: 32rpx;margin-right:20rpx;color:#0000FF"></span>  
							{{item.dormitoryNo}}
						</view>
						<view style="margin-top:40rpx;color:#8F8F94;font-size:24rpx;width:180rpx;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">({{item.deviceName}})</view>
						<view style="margin-top:40rpx;color:#8F8F94;font-size: 28rpx;width:180rpx">
							{{item.repairDate}}						
						</view>
						<view v-show="isShowTitle" style="margin-top: 40rpx; color:#ff0088;font-size: 28rpx;text-align: right;">已报修></view>
						<view v-show="!isShowTitle" style="margin-top: 40rpx; color:#8F8F94;font-size: 28rpx;text-align: right;">
							<view v-if="item.status=='处理完'" >{{item.status}} <span class="iconfont icon-xiajiantou"></span></view>
							<view v-if="item.status=='处理中'"  style="color:red">{{item.status}} <span class="iconfont icon-xiajiantou"></span></view>
							<view v-if="item.status=='已报修'"  style="color:blue">{{item.status}} <span class="iconfont icon-xiajiantou"></span></view>				
						</view>
					</view>
					
					<view class="timePos" v-show="item.isShow">
						<view  style="color:#8F8F94;font-size: 28rpx;">
							<span >
								报修细节情况：
							</span>	
							<view>{{item.repairDesc}}</view>
						</view>
											
					</view>
					
				</view>
			</view>
			<view v-else style="font-size: 28rpx;color:#8F8F94;text-align: center;">暂无维修记录</view>
			
		</view>
		<my-bottom :topName="topName" :bottomArr="attBottoms" :bottomName="bottomName"></my-bottom>
		
	</view>
</template>

<script>
	import topCom from '../component/topCom.vue'
	import bottomCom from '../component/bottom.vue'
	import headTitle from '../component/btnHeadeCom.vue'
	export default {
		name:'leveRegistration',
		data(){
			return{
				isShowTitle:true,
				isShowList:false,
				userName:'',
				topName:'',
				titleHead:'历史维修记录',
				bottomName:'maintenance',
				maintenanceList:[{
					class:'202',
					address:'畔湖苑',
					time:'2022-03-5',
					msg:'1、电器损坏',
					isShow:false
				},{
					class:'203',
					address:'畔湖苑',
					time:'2022-03-6',
					msg:'1、水龙头损坏',
					isShow:false
				},],
				newMaintenanceList:[],
				historyMaintenanceList:[{
					class:'202',
					address:'畔湖苑',
					time:'2022-03-5',
					status:'已报修',
					msg:'1、电器损坏',
					isShow:false
				},{
					class:'203',
					address:'畔湖苑',
					time:'2022-03-6',
					msg:'1、水龙头损坏',
					status:'已报修',
					isShow:false
				},{
					class:'204',
					address:'畔湖苑',
					time:'2022-03-6',
					msg:'1、水龙头损坏',
					status:'处理中',
					isShow:false
				},{
					class:'205',
					address:'畔湖苑',
					time:'2022-03-6',
					msg:'1、水龙头损坏',
					status:'处理完',
					isShow:false
				},],
				dormitoryId:1,
				buildingNo:'',
				type:'',
			attBottoms:[{
			    name:'home',
			    icon:'iconfont icon-yonghutongji',
			    text:"考勤",
			    path: '/pages/classManagement/classManagementDormitoryAttendance'
			},
			{
			    name:'clear',
			    icon:'iconfont icon-saoba',
			    text:"卫生",
			    path: '/pages/classManagement/classManageDormitoryHealth'
			},
			{
			   name:'maintenance',
			   icon:'iconfont icon-baoxiu',
			   text:"报修",
			   path: '/pages/maintenance/dormitoryMaintenanceList'
			}]
				
			}
		},
		onLoad(options) {
			this.topName = options.dormitoryNo
			this.dormitoryId = options.dormitoryId
			this.type = options.type
			this.buildingNo = options.buildingNo
		},
		components:{
			topCom,
			bottomCom,
			headTitle,
		},
		onShow() {
		  var that = this
		  uni.getStorage({
		  	key:'userName',
			success:(res)=>{
				that.userName = res.data
			}
		  })
		},
		mounted(){
			this.getNewRepairInfoById()
			this.getAppHisRepListByBId()
		},
		methods:{
			newMaintenanceFun(item){
				item.isShow = !item.isShow
				this.$forceUpdate()
			},
			//  status 0:已报修  1：处理中  2：处理完
			getAppHisRepListByBId(){
				this.$api.maintenance.getAppHisRepListByBId(this.dormitoryId).then(res=>{
					this.historyMaintenanceList = res.data					
				
					if(this.historyMaintenanceList.length>0){
						this.historyMaintenanceList.forEach((item,index)=>{
							if(item.status==0){
								item.status = "已报修"
							}else if(item.status == 1){
								item.status = "处理中"
							}else {
								item.status = "处理完"
							}
						})
					}
					
				})
			},
			getNewRepairInfoById(){
				this.attBottoms[0].path= `/pages/classManagement/classManagementDormitoryAttendance?buildingNo=${this.buildingNo}&type=${this.type}`
				this.attBottoms[1].path = `/pages/classManagement/classManageDormitoryHealth?buildingNo=${this.buildingNo}&type=${this.type}`
				this.attBottoms[2].path = `/pages/maintenance/dormitoryMaintenanceList?buildingNo=${this.buildingNo}&type=${this.type}`
				this.$api.maintenance.getNewRepairInfoById(this.dormitoryId).then(res=>{
					this.newMaintenanceList =res.data
					if(this.newMaintenanceList.length>0){
						this.newMaintenanceList.forEach((item,index)=>{
							if(item.status==0){
								item.status = "已报修"
							}else if(item.status == 1){
								item.status = "处理中"
							}else {
								item.status = "处理完"
							}
						})
					}
					this.maintenanceList = this.newMaintenanceList
					this.$forceUpdate()
				})
			},
			attendanceTtileFun(){
				this.isShowTitle = !this.isShowTitle
				if(this.isShowTitle==true){
					this.maintenanceList = this.newMaintenanceList
				}else{
					this.maintenanceList = this.historyMaintenanceList
				}
			}
		}
	}
</script>

<style>
	.timePos{
		position: relative;
		top: 0rpx;
		right: -10rpx;
		background: white;
		border: 1px solid #cccc;
		border-radius: 20rpx;
		padding:20rpx;
		width:660rpx;
		margin-bottom: 20rpx;
	}
	.leaveBtn{
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-01.png);
		background-size: 100%;
		background-repeat: no-repeat;
		width:190rpx;
		height:60rpx;
		color:white;
		font-size: 26rpx;
		font-weight: 0;
	}
	.mainContentWrap{
		border:#8F8F94 solid 0rpx;
		height: 120rpx;
		border-radius: 20rpx;
		margin-top:30rpx;
		width:700rpx;
		margin-left:10rpx;
		box-shadow: 0rpx 0rpx 10rpx 0rpx #8F8F94;
		display: flex;
		justify-content: space-around;
		align-content: space-around;
		
	}
	.dormitoryNav{
				color:#0000FF;
				margin-left:80rpx;
				margin-top: 30rpx;		
			}
			.leaveLine{
				width:200rpx;
				height:8rpx;
				background:rgba(239, 220, 11, 1.0);
				opacity:0.78;
				position: relative;
				bottom: -10rpx;
				left:-30rpx;
			}
	.attBtn1{
		margin-right:4rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top:-20rpx;		
	}
	.leaveNav{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		font-size: 36rpx;
		color:blue;
		width:100%;
		padding:50rpx
	}
	.leaveBtn{
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-01.png);
		background-size: 100%;
		width:190rpx;
		height:60rpx;
		color:white;
		font-size: 26rpx;
		font-weight: 0;
	}
	.leaveLine{
		width:200rpx;
		height:8rpx;
		background:rgba(239, 220, 11, 1.0);
		opacity:0.78;
		position: relative;
		bottom: -10rpx;
		left:-30rpx;
	}
	.leaveMgm{
		color:#808080;
		font-size: 28rpx;
	}
	.leaveCheck{
		margin-left:60rpx;
		margin-bottom: 30rpx;
		
	}
	.attBtnFontSlec{
		border:solid #007AFF !important ;border-radius: 15rpx;font-size: 20rpx;
		color:white;
		background-color: #007AFF;
	}
	.attBtnFont{
		border:solid #808080 0rpx !important;;font-size: 20rpx;
	}
	.attBtnFont1{
		border:solid #808080 0rpx !important;;font-size: 20rpx;
		padding-left: 18rpx !important;
		padding-right: 18rpx !important;
	}
	.attLine{
		width:700rpx;
		height:3rpx;
		background:rgba(239, 237, 236, 1.0);
		opacity:0.78;
		position: relative;
		bottom: 10rpx;
		left:0rpx;
	}
	.attBtn{
		width:60%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top:-20rpx;
		
	}
	.leaveBtn{
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-01.png);
		width:190rpx;
		height:60rpx;
		color:white;
		font-size: 26rpx;
		font-weight: 0;
	}
	.leaveLine{
		width:273rpx;
		height:8rpx;
		background:rgba(239, 220, 11, 1.0);
		opacity:0.78;
		position: relative;
		bottom: -10rpx;
		left:-30rpx;
	}
	.leaveMgm{
		color:#808080;
		font-size: 28rpx;
	}
	.leaveCheck{
		margin-left:60rpx;
		margin-bottom: 30rpx;		
	}
	.checkout{
		display: flex;
		justify-content: space-around;
		align-content: space-between;
	}
	.leaveTabLine{
		width:3rpx;
		height:60rpx;
		background:#8F8F94;
		opacity:0.78;
		position: relative;
		top: 0rpx;
		left:150rpx;
	}
</style>
